﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Bootgrid Demo</title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="../dist/jquery.bootgrid.css" rel="stylesheet" />
    <script src="js/modernizr-2.8.1.js"></script>
    <style>
        @-webkit-viewport {
            width: device-width;
        }

        @-moz-viewport {
            width: device-width;
        }

        @-ms-viewport {
            width: device-width;
        }

        @-o-viewport {
            width: device-width;
        }

        @viewport {
            width: device-width;
        }

        body {
            padding-top: 70px;
        }
    </style>
</head>
<body>
    <header id="header" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <span class="navbar-brand" data-i18n="title">jQuery Bootgrid</span>
            </div>
            <nav id="menu" class="navbar-collapse collapse" role="navigation">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Basic Demo</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 visible-md visible-lg">
                <div class="affix">
                    Sub Nav
                </div>
            </div>
            <div class="col-md-9">
                <button id="send" type="button" class="btn btn-default">Send</button>
                <table id="grid" class="table table-condensed table-hover table-striped">
                    <thead>
                        <tr>
                            <th data-column-id="id" data-identifier="true" data-type="numeric">Article ID</th>
                            <th data-column-id="sender" data-order="asc">Article Name</th>
                            <th data-column-id="quantity" data-formatter="quantity">Quantity</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Article 1</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Article 2</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Article 3</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>Article 4</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>Article 5</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>Article 6</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>Article 7</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>Article 8</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td>Article 9</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>10</td>
                            <td>Article 10</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>11</td>
                            <td>Article 11</td>
                            <td>0</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <footer id="footer">
        © Copyright 2014, Rafael Staib
    </footer>

    <script src="../lib/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="../dist/jquery.bootgrid.js"></script>
    <script>
        $(function ()
        {
            var data = [];

            var grid = $("#grid").bootgrid({
                pagination: 3,
                selection: true,
                multiSelect: true,
                formatters: {
                    "quantity": function (column, row)
                    {
                        return "<input id=\"" + row.id + "-quantity\" type=\"text\" class=\"quantity\" value=\"" + row.quantity + "\" />";
                    }
                }
            }).on("loaded.rs.jquery.bootgrid", function (e)
            {
                // Resets the selected data array on reload, searching, sorting or changing page
                data = [];

                grid.on("keyup", "input.quantity", function ()
                {
                    e.stopPropagation();

                    // Array.first is an extension of bootgrid
                    var $this = $(this),
                        rowId = +$this.attr("id").split("-")[0], // "+" to convert the a string to an integer
                        item = data.first(function (item) { return item.id === rowId; });
                    if (item != null)
                    {
                        item.quantity = $this.val();
                    }
                });
            }).on("selected.rs.jquery.bootgrid", function (e, selectedRows)
            {
                var row, quantity;
                for (var i = 0; i < selectedRows.length; i++)
                {
                    row = selectedRows[i];

                    // Array.contains is an extension of bootgrid
                    if (!data.contains(function (item) { return item.id === row.id; }))
                    {
                        quantity = grid.find("#" + row.id + "-quantity").val();
                        data.push({ id: row.id, quantity: quantity || 0 });
                    }
                }
            }).on("deselected.rs.jquery.bootgrid", function (e, deselectedRows)
            {
                var row;
                for (var i = 0; i < deselectedRows.length; i++)
                {
                    row = deselectedRows[i];
                    for (var j = 0; j < data.length; j++)
                    {
                        if (data[j].id === row.id)
                        {
                            data.splice(j, 1);
                            return;
                        }
                    }
                }
            });

            $("#send").on("click", function ()
            {
                var params = $.param({ "": data });
                alert(decodeURIComponent(params));
            });
        });
    </script>
</body>
</html>